yuncms /
framework
| Conditions | 2 |
| Paths | 48 |
| Total Lines | 129 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | jQuery(function () { |
||
| 2 | 'use strict'; |
||
| 3 | var $image = jQuery('#image'); |
||
| 4 | var $dataX = jQuery('#x'); |
||
| 5 | var $dataY = jQuery('#y'); |
||
| 6 | var $dataHeight = jQuery('#height'); |
||
| 7 | var $dataWidth = jQuery('#width'); |
||
| 8 | var options = { |
||
| 9 | viewMode: 1, |
||
| 10 | dragMode: 'move', |
||
| 11 | autoCropArea: 1, |
||
| 12 | restore: false, |
||
| 13 | highlight: false, |
||
| 14 | cropBoxMovable: false, |
||
| 15 | cropBoxResizable: false, |
||
| 16 | aspectRatio: 1 / 1, |
||
| 17 | preview: '.img-preview', |
||
| 18 | crop: function (e) { |
||
| 19 | $dataX.val(Math.round(e.x)); |
||
| 20 | $dataY.val(Math.round(e.y)); |
||
| 21 | $dataHeight.val(Math.round(e.height)); |
||
| 22 | $dataWidth.val(Math.round(e.width)); |
||
| 23 | if(!jQuery('#inputImage').val()) { |
||
| 24 | jQuery('.btn-group button').attr('disabled', true); |
||
| 25 | jQuery('.cropper-view-box').hide(); |
||
| 26 | jQuery('.cropper-wrap-box').hide(); |
||
| 27 | } |
||
| 28 | } |
||
| 29 | }; |
||
| 30 | |||
| 31 | // Cropper |
||
| 32 | $image.cropper(options); |
||
| 33 | |||
| 34 | // Methods |
||
| 35 | jQuery('.docs-buttons').on('click', '[data-method]', function () { |
||
| 36 | var $this = jQuery(this); |
||
| 37 | var data = $this.data(); |
||
| 38 | var $target; |
||
| 39 | var result; |
||
| 40 | |||
| 41 | if ($this.prop('disabled') || $this.hasClass('disabled')) { |
||
| 42 | return; |
||
| 43 | } |
||
| 44 | |||
| 45 | if ($image.data('cropper') && data.method) { |
||
| 46 | data = jQuery.extend({}, data); // Clone a new one |
||
| 47 | if (typeof data.target !== 'undefined') { |
||
| 48 | $target = jQuery(data.target); |
||
| 49 | if (typeof data.option === 'undefined') { |
||
| 50 | try { |
||
| 51 | data.option = JSON.parse($target.val()); |
||
| 52 | } catch (e) { |
||
| 53 | console.log(e.message); |
||
|
Debugging Code
introduced
by
|
|||
| 54 | } |
||
| 55 | } |
||
| 56 | } |
||
| 57 | result = $image.cropper(data.method, data.option, data.secondOption); |
||
| 58 | if ($.isPlainObject(result) && $target) { |
||
| 59 | try { |
||
| 60 | $target.val(JSON.stringify(result)); |
||
| 61 | } catch (e) { |
||
| 62 | console.log(e.message); |
||
| 63 | } |
||
| 64 | } |
||
| 65 | } |
||
| 66 | return false; |
||
| 67 | }); |
||
| 68 | |||
| 69 | |||
| 70 | // Keyboard |
||
| 71 | jQuery(document.body).on('keydown', function (e) { |
||
| 72 | if (!$image.data('cropper') || this.scrollTop > 300) { |
||
| 73 | return; |
||
| 74 | } |
||
| 75 | |||
| 76 | switch (e.which) { |
||
| 77 | case 37: |
||
| 78 | e.preventDefault(); |
||
| 79 | $image.cropper('move', -1, 0); |
||
| 80 | break; |
||
| 81 | |||
| 82 | case 38: |
||
| 83 | e.preventDefault(); |
||
| 84 | $image.cropper('move', 0, -1); |
||
| 85 | break; |
||
| 86 | |||
| 87 | case 39: |
||
| 88 | e.preventDefault(); |
||
| 89 | $image.cropper('move', 1, 0); |
||
| 90 | break; |
||
| 91 | |||
| 92 | case 40: |
||
| 93 | e.preventDefault(); |
||
| 94 | $image.cropper('move', 0, 1); |
||
| 95 | break; |
||
| 96 | } |
||
| 97 | }); |
||
| 98 | |||
| 99 | |||
| 100 | // Import image |
||
| 101 | var $inputImage = jQuery('#inputImage'); |
||
| 102 | var URL = window.URL || window.webkitURL; |
||
| 103 | var blobURL; |
||
| 104 | |||
| 105 | if (URL) { |
||
| 106 | $inputImage.change(function () { |
||
| 107 | var files = this.files; |
||
| 108 | var file; |
||
| 109 | if (!$image.data('cropper')) { |
||
| 110 | return; |
||
| 111 | } |
||
| 112 | if (files && files.length) { |
||
| 113 | file = files[0]; |
||
| 114 | if (/^image\/\w+$/.test(file.type)) { |
||
| 115 | blobURL = URL.createObjectURL(file); |
||
| 116 | $image.one('built.cropper', function () { |
||
| 117 | // Revoke when load complete |
||
| 118 | URL.revokeObjectURL(blobURL); |
||
| 119 | }).cropper('reset').cropper('replace', blobURL); |
||
| 120 | } else { |
||
| 121 | window.alert('Please choose an image file.'); |
||
| 122 | } |
||
| 123 | } |
||
| 124 | jQuery('.btn-group button').removeAttr('disabled'); |
||
| 125 | }); |
||
| 126 | } else { |
||
| 127 | $inputImage.prop('disabled', true).parent().addClass('disabled'); |
||
| 128 | } |
||
| 129 | }); |
Loading history...